<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自适应页面</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!-- 菜单栏 -->
    <nav class="menu">
      <label for="menu-btn" class="menu-btn icon-menu"></label>
      <input type="checkbox" id="menu-btn" class="menu-btn" />
      <ul class="collapse">
        <li><a href="javascript:void(0)">首页</a></li>
        <li class="dropdown">
          <a href="javascript:void(0)">课程</a>
          <ul>
            <li><a href="javascript:void(0)">全部课程</a></li>
            <li><a href="javascript:void(0)">学习路径</a></li>
            <li><a href="javascript:void(0)">训练营</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0)">竞赛</a></li>
        <li><a href="javascript:void(0)">蓝桥杯</a></li>
      </ul>
    </nav>
    <!-- 页面内容 -->
    <div class="page">
      <section id="tutorials">
        <div class="row">
          <div class="text">
            <h4>最新课程</h4>
            <h3>Linux 基础入门</h3>
            <p class="box">
              本课程教你如何熟练地使用 Linux，本实验中通过在线动手实验的方式学习
              Linux
              常用命令，用户与权限管理，目录结构与文件操作，环境变量，计划任务，管道与数据流重定向等基本知识点。
            </p>
          </div>
          <img src="images/linux_course.png" alt="Linux课程封面" />
        </div>
        <div class="row">
          <div class="text">
            <h4>热门课程</h4>
            <h3>oeasy 教您玩转 python</h3>
            <p class="box">
              简明易懂的 Python3 课程。从零开始，在 Linux 环境中使用
              Vim，一步步带你玩转脚本语言 Python，感受编程的乐趣。
            </p>
          </div>
          <img src="images/python_course.png" alt="Python课程封面" />
        </div>
        <div class="row">
          <div class="text">
            <h4>体系课程</h4>
            <h3>C++基础入门实战</h3>
            <p class="box">
              C 语言是面向过程的程序设计语言，而 C++ 语言是由 C
              语言演变而来的一种面向对象的程序设计语言。课程实验内容从 C++
              语言的概念开始，通过理论学习和实验操作，初步熟知 C++ 语言。
            </p>
          </div>
          <img src="images/C%2B%2B_course.png" alt="C++课程截图" />
        </div>
      </section>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
      
      /* TODO: 考生可以根据需要使用 jQuery 实现脚本控制，也可以只使用纯 css 实现 */
      $(function() {
        
      })
    </script>
  </body>
</html>
